import React from "react";
import "./App.scss";
// 导入路由的基本功能组件
import {
    HashRouter as Router,
    Switch,
    Route,
    NavLink
} from "react-router-dom";
// 导入页面组件
import Home from "../Home/Home";
import TableInfo from "../TableInfo/TableInfo";
import FormInfo from "../FormInfo/FormInfo";
import ContactManage from "../ContactManage/ContactManage";
import Login from "../Login/Login";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            logged: false,
            nickname: '管理员'
        }
    }

    componentDidMount() {
        // 获取会话存储昵称
        const nickname = sessionStorage.getItem('nickname');
        // 如果昵称存在
        if(nickname) {
            // 设置昵称和登录状态
            this.setState({
                nickname,
                logged: true,
            })
        }
        // 如果昵称不存在
        else {
            // 修改登录状态为未登录
            this.setState({
                logged: false
            });
        }
    }

    /**
     * 退出登录事件
     */
    logoutEvent = () => {
        if(window.confirm('您确定要退出登录吗？')) {
            // 设置登录状态为未登录，还原昵称
            this.setState({
                logged: false,
                nickname: '管理员'
            });
            // 清除会话存储的昵称key
            sessionStorage.removeItem('nickname');
        }
    }

    render() {
        // 如果已经登录，则显示管理界面
        if(this.state.logged) {
            return (
                <Router>
                    <div className="App">
                        {/* 网页头部 */}
                        <header>
                            <NavLink to="/" title="回到管理首页">
                                <div className="logo">库存管理系统</div>
                            </NavLink>
                            <div className="hello-admin">您好，<span onClick={this.logoutEvent}>{this.state.nickname}</span>！</div>
                        </header>
        
                        {/* 网页主体 */}
                   
                        <main>
                            {/* 左侧导航部分 */}
                            <div className="main-left">
                                <ul className="main-nav">
                                    <li>
                                        <NavLink exact to="/">管理首页</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to="/tableinfo">库存信息管理</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to="/forminfo">商品信息录入</NavLink>
                                    </li>
                                    <li>
                                        <NavLink to="/contact">联系管理员</NavLink>
                                    </li>
                                    <li className="logout">
                                        <span onClick={this.logoutEvent}>退出登录</span>
                                    </li>
                                </ul>
                            </div>
    
                            {/* 右侧内容部分 */}
                            <div className="main-right">
                                <Switch>
                                    <Route exact path="/" component={Home} />
                                    <Route path="/tableinfo" component={TableInfo} />
                                    <Route path="/forminfo" component={FormInfo} />
                                    <Route path="/contact" component={ContactManage} />
                                </Switch>
                            </div>
                        </main>
                    </div>
                </Router>
            );
        }
        // 如果没有登录，则显示登录界面
        else {
            return (<Login 
                loginSuccess={() => {
                    // 获取会话存储昵称
                    const nickname = sessionStorage.getItem('nickname');
                    this.setState({
                        logged: true,
                        nickname
                    })
                }} 
            />)
        }
    }
}

export default App;
